@use 'sass:map';
@use '../../../../../node_modules/@angular/material/index' as mat;
@use '../../../../../node_modules/@gravitee/ui-particles-angular/index' as gio;

@use '../../../../scss/gio-layout' as gio-layout;

:host {
  @include gio-layout.gio-responsive-content-container;
}

$typography: map.get(gio.$mat-theme, typography);

.card {
  &__template-key,
  &__accept-header,
  &__status-code,
  &__http-headers,
  &__body {
    padding-bottom: 12px;

    &__label {
      @include mat.typography-level($typography, subtitle-2);
    }

    &__label,
    &__hint {
      padding: 0 0.75em 0 0.75em;
    }

    &__form-field {
      width: 100%;
    }
  }

  &__http-headers {
    &__label {
      margin-bottom: 12px;
    }
  }

  &__body {
    &__label {
      margin-top: 12px;
    }
  }
}
